<template>
  <div class="banner"></div>
  <div class="bsplit">全部工具</div>
  <div class="atool">
    <div class="atli">
      <img src="@/assets/images/index/t2i.png">
      <div class="atitle">文生图</div>
      <div class="adesc">通过文字描述生成图片</div>
    </div>
    <div class="atli">
      <img src="@/assets/images/index/i2i.png">
      <div class="atitle">图生图</div>
      <div class="adesc">图像风格转换、线稿生成</div>
    </div>
    <div class="atli">
      <img src="@/assets/images/index/i24k.png">
      <div class="atitle">画质提升</div>
      <div class="adesc">一键无损提升至4K画质</div>
    </div>
  </div>
  <div class="bsplit">热门风格</div>
  <div class="ilist">
    <div class="iitem gqmt">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://edit-static-1307270943.cos.ap-beijing.myqcloud.com/images/profile/profile_3.svg">
            狩獵♬緈諨
          </div>
          <div class="footer-collection">
            ☆ 1945
          </div>
        </div>
        <div class="ititle">高清美图</div>
      </div>
    </div>
    <div class="iitem pksfg">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://rbaigctool-1307270943.cos.ap-beijing.myqcloud.com/18875ab1-2145-49e8-80b7-1963170d5c7f">
            狂野的河马
          </div>
          <div class="footer-collection">
            ☆ 1927
          </div>
        </div>
        <div class="ititle">皮克斯风格</div>
      </div>
    </div>
    <div class="iitem htecrx">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://edit-static-1307270943.cos.ap-beijing.myqcloud.com/images/profile/profile_2.svg">
            糟糕的流沙
          </div>
          <div class="footer-collection">
            ☆ 3346
          </div>
        </div>
        <div class="ititle">厚涂二次元人像</div>
      </div>
    </div>
    <div class="iitem ylzs">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://rbaigctool-1307270943.cos.ap-beijing.myqcloud.com/18875ab1-2145-49e8-80b7-1963170d5c7f">
            狂野的河马
          </div>
          <div class="footer-collection">
            ☆ 3346
          </div>
        </div>
        <div class="ititle">玉林战士</div>
      </div>
    </div>
    <div class="iitem mgch">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://edit-static-1307270943.cos.ap-beijing.myqcloud.com/images/profile/profile_4.svg">
            亲爱的小路
          </div>
          <div class="footer-collection">
            ☆ 3346
          </div>
        </div>
        <div class="ititle">美国插画-1950</div>
      </div>
    </div>
    <div class="iitem zsj20">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://rbaigctool-1307270943.cos.ap-beijing.myqcloud.com/52ae637d-f964-4db5-ab3a-819f0ca68a76">
            狂野的河马
          </div>
          <div class="footer-collection">
            ☆ 1962
          </div>
        </div>
        <div class="ititle">中世纪2.0</div>
      </div>
    </div>
    <div class="iitem ddmfg">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://edit-static-1307270943.cos.ap-beijing.myqcloud.com/images/profile/profile_2.svg">
            倔强的鸭毛
          </div>
          <div class="footer-collection">
            ☆ 571
          </div>
        </div>
        <div class="ititle">3D动漫风格</div>
      </div>
    </div>
    <div class="iitem gyfggw">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://rbaigctool-1307270943.cos.ap-beijing.myqcloud.com/fae45d1b-564c-4add-ab14-573d35d9ee8e.png">
            舒适的橘子
          </div>
          <div class="footer-collection">
            ☆ 2619
          </div>
        </div>
        <div class="ititle">诡异风格/怪物</div>
      </div>
    </div>
    <div class="iitem sjhtzqbfg">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://rbaigctool-1307270943.cos.ap-beijing.myqcloud.com/408d9f27-8a64-4d08-9d7c-b29d26debd13.png">
            猫君
          </div>
          <div class="footer-collection">
            ☆ 3346
          </div>
        </div>
        <div class="ititle">水晶海豚蒸汽风格</div>
      </div>
    </div>
    <div class="iitem scsn">
      <div class="footer">
        <div class="itool">
          <div  class="footer-desc">
            <img src="https://edit-static-1307270943.cos.ap-beijing.myqcloud.com/images/profile/profile_3.svg">
            白云流马
          </div>
          <div class="footer-collection">
            ☆ 3346
          </div>
        </div>
        <div class="ititle">色彩室内</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

</script>

<style scoped>
.banner {
  width: 100%;
  height: 265px;
  background: url("@/assets/images/index/new.png");
  background-position: 60% center;
  background-size: 150% 100%;
  margin-top: 31px;
  border-radius: 8px;
}
</style>